<template>
  <div class="news-deail">
    <div class="news-detail-header">
      <span class="iconfont" @click="back">&#xe612;</span>
      <div class='title'>资讯详情</div>
      <div class="right"></div>
    </div>
    <div class="news-detail-con" v-for="(list, index) of NewsDetail" :key="index">
      <div class="news-detail-img-text">
        <div class="news-img"  v-html='list.newsDetail'>
          <!-- <img src="https://bbs.vivo.com.cn/forum.php?mod=image&aid=6487059&size=720x0&key=95498692e14f5992&type=fixnone" alt=""> -->
        </div>
        <!-- <p class="news-text">
          和以往的vivo X系列不同，vivo X21这一次的包装不再沿用白色的简约设计，反而是用了深蓝色的外包装，增加了一点科技感和炫酷感。
        </p> -->
      </div>
      <div class="news-detail-footer">
        <div class="news-detail-footer-left" @click="count">
          <i class="iconfont ndfl">&#xe631;</i>
          <span class="news-detail-footer-num">{{ counts }}</span>
        </div>
        <div class="news-detail-footer-right-show"  @click="btnCollection(list)" v-show="!sc">
          <i class="iconfont ndfr">&#xe644;</i>
          <span class="news-detail-footer-coll">收藏</span>
        </div>
        <div class="news-detail-footer-right-hide"  @click="btnCollection(list)" v-show="sc">
          <i class="iconfont ndfr">&#xe644;</i>
          <span class="news-detail-footer-coll">收藏</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapGetters, mapMutations } from 'vuex'
import { Toast } from 'mint-ui'
export default {
  name: 'newsDetail',
  data() {
    return {
      NewsDetail: [],
      // 保存是否为false和true
      sc: false,
      // 点赞记录
      counts: 0
    }
  },
  computed: {
    ...mapGetters(["this.$store.state.article"])
  },
  methods:{
    // 1.返回
    back: function(){
      this.$router.go(-1)
    },

    // 2.实现点赞功能
    count: function(){
      this.counts++
    },

    // 3.获取到数据保存到本地
    btnCollection(list){
      // 让图标按钮变色
      this.sc = !this.sc
      // console.log(this.sc)

      // 做判断是否被收藏了
      if(this.sc){
        // 设置时间格式
        var date = new Date();
        var a = '-';
        var b = ':';
        var c = ' ';
        var year = date.getFullYear(); // 年
        var month = date.getMonth() + 1; // 月份要+1
        var day = date.getDate(); // 日
        var hour = date.getHours(); // 时
        var minutes = date.getMinutes(); // 分

        // 判断月，天，小时是否要要加前缀0
        month = month < 10 ? ('0' + month) : month;
        day = day < 10 ? ('0' + day) : day;
        hour = hour < 10 ? ('0' + hour) : hour;
        minutes = minutes < 10 ? ('0' + minutes) : minutes;

        // 获取到最新时间
        var currentDate = year + a + month + a + day + c + hour + b + minutes;

        // var currentDate = '2019-07-11 16:50'

        var idExist = this.$store.state.article.find(data => {
          return data.id == list.id
        })

        // 判断id是否存在
        if(!idExist){
          var data = {
            id: list.id,
            title: list.newsTitle,
            newsCon: list.newsCon,
            currentdate: currentDate
          };
          Toast({
            message: '收藏成功',
            duration: 950
          });
          this.$store.dispatch('setArticle', data)
        }else{
          Toast({
            message: '您已经收藏了',
            duration: 950
          })
        }
        // 取消收藏
      }else{
        Toast({
            message: '您已经取消收藏了',
            duration: 950
          })
      }

    }
  },
  created() {
    var that = this
    // 获取到携带的参数id
    var id = this.$route.query.id
    axios.get('/static/ceshi.json').then(function(res){
      // console.log(res);
      // console.log(res.data.data.news[0].sc)
      // console.log(that.NewsDetail)
      for(var i=0; i<res.data.data.news.length ; i++){
        // 如果携带id等于数据中的id，就将数据添加到页面上
        if(id == res.data.data.news[i].id){
          that.NewsDetail.push(res.data.data.news[i])
          that.sc = res.data.data.news[i].sc
          // console.log(that.sc)
        }
      }

      // that.NewsDetail.push(res.data.data.news[0])
    })
  },
  // methods: {
  //   back: function(){
  //     this.$router.go(-1)
  //   }
  // },
}
</script>

<style lang="less">
  .news-detail-header{
    position: fixed;
    top: 0;
    z-index: 2;
    background: white;
    width: 100%;
    height: 1.5rem;
    color: #777;
    border-bottom: 1px solid #eee;
    span{
      width: 10%;
      float: left;
      height: 1.5rem;
      line-height: 1.5rem;
      font-size: .8rem;
      text-align: center;
    }
    .title{
      width: 80%;
      float: left;
      line-height: 1.5rem;
      text-align: center;
      margin: 0 auto;
      font-size: .5rem;
    }
    .right{
      float: left;
      width: 10%;
      line-height: 1rem;
    }
  }
  .news-detail-con{
    width: 100%;
    padding-top: 1.5rem;
    background: white;
    border-top: 1px solid #eee;
    .news-detail-img-text{
      width: 100%;
      margin-bottom: .26rem;
      .news-img{
        width: 95%;
        margin: 0 auto;
        img{
          width: 100%;
          margin: 0.2rem 0 0.2rem 0;
          border-radius: .3rem;
        }
      }
      p{
        padding: 0.05rem 0.2rem 0 0.2rem;
        font-size: .4rem;
        line-height: 0.6rem;
        text-indent: 2em;
      }
    }
  }
  .news-detail-footer{
    width: 100%;
    height: 1.4rem;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2796d5;
    font-size: .26rem;
    margin-bottom: .5rem;
    .news-detail-footer-left{
      width: 3rem;
      height: .8rem;
      border: 1px solid #2796d5;
      margin-right: .3rem;
      border-radius: 1rem;
      text-align: center;
      line-height: .8rem;
      font-size: .5rem;
      .ndfl{
        font-size: .5rem;
      }
    }
    .news-detail-footer-right-show{
      width: 3rem;
      height: .8rem;
      border: 1px solid #2796d5;
      margin-left: .3rem;
      border-radius: 1rem;
      text-align: center;
      line-height: .8rem;
      font-size: .42rem;
    }
    .news-detail-footer-right-hide{
      width: 3rem;
      height: .8rem;
      border: 1px solid red;
      margin-left: .3rem;
      border-radius: 1rem;
      text-align: center;
      line-height: .8rem;
      color: red;
      font-size: .42rem;
    }
  }
</style>
